<template>
  <a-modal
    :visible="visible"
    :width="1000"
    :title="title"
    :destroyOnClose="true"
    :maskClosable="false"
    footer=""
    @cancel="closeModal()"
    :keyboard="false">
    <a-form :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }">
      <a-form-item label="产品分类">
        <div v-for="(item,index) in formData.galleryClassificationNameList" :key="index">
          {{item}}
        </div>
      </a-form-item>
      <a-form-item label="产品名称">
        {{formData.galleryProductName}}
      </a-form-item>
      <a-form-item label="产品主图片">
          <a-space class="main_picture" >
              <img :src="formData.largeScreenPicture"/>
              <img :src="formData.appPicture"/>
              <img :src="formData.appletPicture"/>
          </a-space>
          <div>
            <a-space class="upload_detail">
                <!-- <div class="img_list">
                  <div class="img_list_item" v-for="(item,index) in formData.galleryProductPictures" :key="index">
                    <span>{{item}}</span>
                    <div class="right">
                      <a :href="item" target="_blank">预览</a>
                      <a href="javascript:;" @click="handleDeletePic(index)">删除</a>
                    </div>
                  </div>
                </div> -->
                <!-- <ImageUploadList
                  :limit="9"
                  :multiple="true"
                  :value="formData.galleryProductPictures"
                  @change="handleDetailChange">
                </ImageUploadList> -->
                <template v-for="(item,index) in formData.galleryProductPictures">
                  <img :src="item" :key="index"/>
                </template>
            </a-space>
          </div>
      </a-form-item>
      <a-form-item label="产品链接" v-if="formData.galleryProductUrl">
        <a href="javascript:;">{{formData.galleryProductUrl}}</a>
      </a-form-item>
      <a-form-item label="产品规格" v-if="formData.galleryProductSpecList && formData.galleryProductSpecList.length>0">
        <table class="product_spec table">
          <tr v-for="(item,index) in formData.galleryProductSpecList" :key="index">
            <th>{{item.specsName}}</th>
            <td>{{item.specsValue}}</td>
          </tr>
        </table>
      </a-form-item>
      <a-form-item label="产品简介" v-if="formData.galleryProductDescribe">
        <div v-html="formData.galleryProductDescribe"></div>
      </a-form-item>
      <a-form-item label="排序">
        {{formData.sort}}
      </a-form-item>
      <a-form-item label="是否显示">
        <a-radio-group disabled
:options="statusList"
          v-model="formData.enableShow"></a-radio-group>
      </a-form-item>
      <a-form-item label="展示平台">
        <a-checkbox-group disabled
          :options="platformList"
          v-model="formData.exhibitionPlatform">
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="报价">
        <a-radio-group disabled
          :options="statusList"
          v-model="formData.quotedPrice">
        </a-radio-group>
        <template  v-if="formData.quotedPrice">
          <table class="table quotationAttr"
            v-for="(item,index) in quotationAttrList"
:key="index">
            <tr v-for="(item2,index2) in item.options" :key="index2">
              <td :rowspan="item.options.length" v-if="index2==0">
                <a-select
                  :options="formatQuotedPriceNameList"
                  v-model="item.id"
                  disabled
                ></a-select>
              </td>
              <td>单价</td>
              <td>
                {{item2.unitPrice}}
              </td>
              <td>属性值范围</td>
              <td>
                {{item2.minNumber}}
                -
                {{item2.maxNumber}}
              </td>
            </tr>
          </table>
        </template>
      </a-form-item>
      <a-form-item label="产品卖点">
        <ul>
            <li v-for="(item,index) in addSellpointList" :key="index">
              <a-select v-model="item.value" style="width:180px;" disabled>
                <a-select-option v-for="(item,index) in sellpointList" :key="index" :value="item.pointType+'_'+item.id">{{item.typeName}} / {{item.pointName}}</a-select-option>
              </a-select>
            </li>
          </ul>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import deepCopy from '@/utils/deepCopy'
import { showPlatformList, showStatusList, showSpecList } from '@/utils/dictData'
import ImageUploadList from '@/components/form/UploadImage'

export default {
  components: {
    ImageUploadList
  },
  props: {
    record: {
      type: Object,
      default () {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title () {
      return '产品详情'
    }
  },
  data () {
    return {
      // 状态列表
      statusList: showStatusList,
      // 平台列表
      platformList: showPlatformList,
      // 格式化图库属性集合
      formatQuotedPriceList: [],
      formatQuotedPriceNameList: [], //
      formData: {},
      quotationAttrList: [],
      addSellpointList:[],//添加的卖点
    }
  },
  watch: {
    visible (newVal) {
      this.resetData()
      if (newVal) {
        this.getDetail()
        this.getPaopertyList();
      }
    }
  },
  created () {

  },
  methods: {
    resetData () {
      this.formData = {}
    },
    async getDetail () {
      let id = this.record.id
      if (!id) {
        return
      }
      let res = await this.$get('/gallery/product/query', { id })
      if (res && res.returnCode == 1000) {
        let tmpObj = res.dataInfo
        console.log('typeof this.formData.exhibitionPlatform', typeof tmpObj.exhibitionPlatform)
        if (tmpObj.exhibitionPlatform && typeof tmpObj.exhibitionPlatform === 'string') {
          tmpObj.exhibitionPlatform = tmpObj.exhibitionPlatform.split(',').map(item => {
            return parseInt(item)
          })
        }
        if (tmpObj.galleryProductPictures) {
          tmpObj.galleryProductPictures = tmpObj.galleryProductPictures.split(',')
        }
        this.formData = tmpObj
        let quotationAttrList = this.quotationAttrListFenToYuan(deepCopy(tmpObj.galleryQuotedPriceList || []))
        this.quotationAttrList = this.formatQuotedPriceListData(quotationAttrList)
        console.log('tmpObj.galleryQuotedPriceList', tmpObj.galleryQuotedPriceList)
        console.log('this.quotationAttrList', this.quotationAttrList)
              
        this.getSellpointList();
      }
    },
    getAllSellpointIds(){
      return this.addSellpointList.map(item=>{
        return item.value.split('_')[1];
      }).filter(item=>item);
    },
    //卖点列表查询
    async getSellpointList(){
      let res=await this.$get('/sellpoint/list')
      if(res && res.returnCode=='1000'){
        this.sellpointList=res.dataInfo || [];
        console.log(' this.sellpointList', this.sellpointList)
        this.formatSellPoint(this.formData.sellPointIds);  
      }
    },
    //卖点回显结果处理，格式：卖点类型_卖点名称
    formatSellPoint(sellPointIdsStr=''){
      //let sellPointIdsStr = tmpObj.sellPointIds || '';
      this.addSellpointList=[];
      if(sellPointIdsStr){
        let sellPointIds=sellPointIdsStr.split(','); 
        sellPointIds.forEach(item=>{
          let pointType='';
          this.sellpointList.forEach(item2=>{
            if(item==item2.id){
              pointType=item2.pointType;
            }
          })
          this.addSellpointList.push({
            value:pointType+'_'+item
          });
        })
      }
    },
    closeModal (freshTable) {
      this.resetData()
      this.$emit('cancel', freshTable)
    },
    // 报价属性名
    async getPaopertyList () {
      let res = await this.$get('/quoted/property/list')
      if (res && res.returnCode == 1000 && res.dataInfo) {
        let tmpData = []
        res.dataInfo.forEach(item => {
          tmpData.push({
            label: item.quotedName,
            value: item.id
          })
        })
        this.formatQuotedPriceNameList = tmpData
      }
    },
    // 格式化报价产品属性
    formatQuotedPriceListData (arr) {
      var map = {}
      var dest = []
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i]
        if (!map[ai.quotedPriceId]) {
          dest.push({
            id: ai.quotedPriceId,
            options: [ai]
          })
          map[ai.quotedPriceId] = ai
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j]
            if (dj.id === ai.quotedPriceId) {
              dj.options.push(ai)
              break
            }
          }
        }
      }
      return dest
    },
    // 报价属性单位换算=>分转元
    quotationAttrListFenToYuan (data = []) {
      let tmpData = []
      data.forEach(item => {
        tmpData.push({
          quotedPriceId: item.quotedPriceId,
          unitPrice: ((item.unitPrice || 0) / 100).toFixed(2),
          minNumber: item.minNumber,
          maxNumber: item.maxNumber
        })
      })
      return tmpData
    }
  }
}
</script>

<style lang="less" scoped>
  .main_picture{
    img{
      display:block;
      width:120px;
      height:120px;
      object-fit: cover;
      border:1px solid #eee;
      box-sizing: border-box;
    }
  }
  .upload_detail{
    flex-wrap: wrap;
    img{
      width:120px;
      height:120px;
      object-fit: cover;
      border:1px solid #eee;
      box-sizing: border-box;
      margin-right:5px;
      margin-top:10px;
    }
    // .img_list{
    //   width:375px;
    //   .img_list_item{
    //     background: #F2F2F2;;
    //     display:flex;
    //     justify-content: space-between;
    //     margin-bottom:5px;
    //     border-radius: 5px;
    //     padding:0 10px;
    //     .right{
    //       a{
    //         &:first-child{
    //           margin-right:10px;
    //         }
    //       }
    //     }
    //   }
    // }
  }
  .table{
    border: 1px solid #E6E6E6;
    width: 100%;
    th,td{
      border: 1px solid #E6E6E6;
      padding:0 10px;
      white-space: nowrap;
    }
    th{
      font-weight: normal;
      width:120px;
    }
    td{

    }
  }
  .quotationAttr{
    table-layout:fixed;
    margin-bottom: 10px;
    text-align: center;
    .ant-select-open .ant-select-selection{
      box-shadow: none;
    }
    td:nth-child(1){
      width:100px;
    }
    td:nth-child(2){
      width:60px;
    }
    td:nth-child(3){
      width:80px;
    }
    td:nth-child(4){
      width:100px;
    }
    td:nth-child(5){
      width:140px;
    }
  }
</style>
